<template>
    <div class="qhgk">
        <div class="title"></div>
        <div class="cnt">
            <div class="bar-warp">
                <div class="item">
                    <div class="item-top">
                        <img src="@/assets/home/people.png">
                        <span>大厅总取号量</span>
                        <span class="number">{{ qhData.takeNumber || 0 }}</span>
                    </div>
<!--                    <div class="bar-box">
                        <div class="bar">
                            <div class="cur-bar" :style="{width: qhsZB + '%'}"></div>
                        </div>
                        <p>{{ qhsZB }}<span>%</span></p>
                    </div>-->
                </div>
                <div class="item">
                    <div class="item-top">
                        <img src="@/assets/home/computer.png">
                        <span>大厅总办件量</span>
                        <span class="number">{{ qhData.takeNumberOnline || 0 }}</span>
                    </div>
<!--                    <div class="bar-box">
                        <div class="bar">
                            <div class="cur-bar" :style="{width: wsqhsZB + '%'}"></div>
                        </div>
                        <p>{{wsqhsZB}}<span>%</span></p>
                    </div>-->
                </div>
            </div>
            <ul>
                <li v-for="item in qhArr">
                    <img :src="item.icon">
                    <div class="right">
                        <p>{{item.name}}</p>
                        <p class="number"><span>{{qhData[item.key] || 0}}</span>{{item.unit}}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "qhgk",
    props: {
        qhData: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        total() {
            if(this.qhData.hasOwnProperty('takeNumber') && this.qhData.hasOwnProperty('takeNumberOnline')){
                let result = parseInt(this.qhData.takeNumber) + parseInt(this.qhData.takeNumberOnline);
                return result
            }
            return 0
        },
        qhsZB(){
            if(this.total == 0){
                return 0
            }
            return ((this.qhData.takeNumber / this.total) * 100).toFixed(2)
        },
        wsqhsZB(){
            if(this.total == 0){
                return 0
            }
            return ((this.qhData.takeNumberOnline / this.total) * 100).toFixed(2)
        },
    },
    data() {
        return {
            qhArr: [
                {
                    icon: require("@/assets/home/qh1.png"),
                    name: "今日取号量",
                    key: "inNumber"
                },
                {
                    icon: require("@/assets/home/qh2.png"),
                    name: "当前办理量",
                    key: "currentHanlderNum"
                },
                // {
                //     icon: require("@/assets/home/qh3.png"),
                //     name: "大厅排队时长",
                //     key: "hallQueueTime",
                //     unit: "分钟"
                // },
                {
                    icon: require("@/assets/home/qh4.png"),
                    name: "正在等待量",
                    key: "wait"
                },
            ],
        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>
.title{
    width: 450px;
    height: 48px;
    background: url("~@/assets/home/left1.png") no-repeat;
    background-size: 100% 100%;
}
.cnt{
    padding-left: 32px;
    margin: 24px 0 22px;
    .bar-warp{
        display: flex;
        margin-bottom: 24px;
        .item{
            width: 186px;
            &+.item{
                margin-left: 18px;
            }
        }
        .item-top{
            display: flex;
            align-items: center;
            img{
                width: 28px;
                height: 28px;
                margin-right: 6px;
            }
            span{
                color: rgba(255, 255, 255, 1);
                font-weight: 400;
                font-size: 16px;
                line-height: 24px;
            }
            .number{
                margin-left: 6px;
                background: linear-gradient(180deg, rgba(9, 165, 255, 0) 33.91%, rgba(9, 165, 255, 1) 100%), rgba(247, 255, 253, 1);
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent;
                font-weight: 500;
                font-size: 20px;
                line-height: 30px;
            }
        }
        .bar-box{
            display: flex;
            align-items: center;
            margin-top: 2px;
            .bar{
                width: 133px;
                height: 8px;
                border-radius: 4px;
                background: rgba(7, 82, 124, 1);
                margin-right: 2px;
            }
            .cur-bar{
                height: 8px;
                border-radius: 4px;
                background: linear-gradient(270deg, rgba(45, 155, 252, 1) 0%, rgba(45, 155, 252, 0.2) 100%);
            }
            p{
                color: rgba(129, 225, 255, 1);
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
            }
            span{
                font-size: 10px;
            }
        }
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        //width: 92%;
        li{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 120px;
            margin-right: 16px;
            //width: 186px;
            //&:nth-child(2n){
            //    margin-left: 18px;
            //}
            //&:nth-child(-n+2){
            //    margin-bottom: 16px;
            //}
            img{
                width: 60px;
                height: 60px;
            }
            .right{
                padding-top: 4.5px;
                //margin-left: 8px;
                margin-top: 2px;
                text-align: center;
            }
            p{
                color: rgba(255, 255, 255, 1);
                font-weight: 400;
                font-size: 14px;
                line-height: 21px;
            }
            span{
                background: linear-gradient(180deg, rgba(9, 165, 255, 0) 33.91%, rgba(9, 165, 255, 1) 100%), rgba(247, 255, 253, 1);
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent;
                font-weight: 500;
                font-size: 20px;
                line-height: 30px;
                margin-right: 2px;
            }
            .number{
                font-weight: 400;
                font-size: 12px;
                line-height: 18px;
                color: #fff;
            }
        }
    }
}
</style>
